<template>
  <div class="flower1">
     <img @click="clickDetail" title="点击图片查看详情" :src="mainPic" alt=""/>
     <div class="txt">
       <div class="originalPrice">¥{{originalPrice }}</div>
      <div class="shortTitle">{{ shortTitle }}</div>
     </div>
  </div>
</template>

<script>
  export default {
    props:['gid','shortTitle','mainPic','originalPrice'],
    methods:{
      clickDetail(){
        this.$emit('detail',{a:3,b:4})
        // console.log(`/home/flower-update/{props.gid}`);
      },
    }
  }
</script>

<style lang="scss" scoped>
.flower1{
  position: relative;
  margin: 10px;
  border-radius: 10px;
  box-shadow: 0 0 0px 2px rgba(0,0,0,0.06);
  overflow: hidden;
  width: 170px;
  height: 250px;
  color: #000;
  background-color: rgb(231, 237, 214);
  >img{
    width: 170px;
    height: 170px;
    cursor: pointer;
  }
  >.txt{
    padding: 10px;
  }
  >.shortTitle
{
    color: #3d3d3d;
  }
  .originalPrice{
    padding: 0px 0 10px 0;
    color: #ff4400;
    font-size: 20px;
  }
}
</style>